<template>
	<view class="circleAnnouncement" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom></HeadCustom>
		<view v-if="detailData.length !== 0" class="ggDetail" v-for="(item, index) in detailData" :key="index">
			<view class="fboxRow Ycenter header_box">
				<image class="img_min" :src="item.avatar" mode="aspectFill"></image>
				<view>
					<p>{{ item.realName }}</p>
					<text>更新于{{ dateFormat(item.gmtModified) }}</text>
				</view>
			</view>
			<p style="white-space: pre-wrap;" v-html="item.content"></p>
		</view>
		<u-loadmore fontSize="24rpx" v-if="isShow" :status="listConfig.loading" />
		<!-- <NotEmpty v-if="detailData.length == 0"></NotEmpty> -->
		<not-login bottom="160rpx" ref="notLogin" />
	</view>
</template>

<script>
import { getNoticeList } from '@/api/mine.js';
import { dateFormat } from '@/static/js/common.js';
export default {
	props: {},
	data() {
		return {
			dateFormat,
			theme: getApp().globalData.appTheme,
						globalColor: getApp().globalData.globalColor,
			announcementList: [],
			detailData: [],
			listConfig: {
				loading: ''
			},
			isShow:false,
			groupId: '',
			page: {
				current: 1,
				size: 20,
				total: 0
			}
		};
	},
	onLoad(options) {
		this.groupId = options.groupId;
		this.getInit();
		uni.setNavigationBarTitle({
			title: `圈子详情`
		});
	},
	onReachBottom() {
		if (this.page.size * this.page.current <= this.page.total) {
			this.listConfig.loading = 'loading';
			this.page.size += 10;
			this.getInit();
		}else{
			this.listConfig.loading = 'nomore';
		}
	},
	onPullDownRefresh() {
		this.page.size = 20;
		this.getInit();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods: {
		getInit() {
			uni.showLoading({
				mask:true,
				title:'加载中...'
			})
			getNoticeList({ ...this.page, groupId: this.groupId }).then(res => {
				this.detailData = res.data.list;
				this.page.total = res.data.total;
			}).finally(()=>{
				uni.hideLoading()
				this.isShow = true
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.circleAnnouncement {
	padding: 40rpx;
	min-height: 100vh;
	.ggDetail {
		background-color: var(--viewBgColor);
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		padding: 40rpx;
		> p {
			font-weight: 400;
			color: var(--titleFontColor);
			line-height: 44rpx;
			font-size: 30rpx;
		}
		.header_box {
			margin-bottom: 40rpx;
			.img_min {
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			> view {
				> p {
					font-weight: 500;
					color: var(--titleFontColor);
					line-height: 44rpx;
					font-size: 30rpx;
				}
				> text {
					font-weight: 400;
					color: var(--contentFontFourColor);
					line-height: 38rpx;
					font-size: 26rpx;
				}
			}
		}
	}
}
</style>
